<template>
  <view class="container">
    <!-- 头像 -->
    <view class="info-item" @click="uploadAvatar">
      <text class="label">头像</text>
      <view class="flex-end">
        <image class="avatar" :src="userInfo?.avatar || ''" />
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 账号与安全 -->
    <view class="info-item" @click="update">
      <text class="label">账号与安全</text>
      <view class="flex-end">
        <text class="arrow">></text>
      </view>
    </view>
	
	<!-- 编辑信息 -->
	<view class="info-item" @click="updateInfo">
	  <text class="label">编辑信息</text>
	  <view class="flex-end">
	    <text class="arrow">></text>
	  </view>
	</view>
	

    <!-- 二维码 -->
    <view class="info-item" @click="getCode">
      <text class="label">二维码</text>
      <view class="flex-end">
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 清除缓存 -->
    <view class="info-item" @click="confirmClearCache">
      <text class="label">清除缓存</text>
      <view class="flex-end">
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 屏幕亮度 -->
    <view class="info-item" @click="showBrightness = true">
      <text class="label">屏幕亮度</text>
      <view class="flex-end">
        <text class="arrow">></text>
      </view>
    </view>
	
	<!-- 屏幕亮度 -->
	<view class="info-item" @click="goaddress">
	  <text class="label">地址管理</text>
	  <view class="flex-end">
	    <text class="arrow">></text>
	  </view>
	</view>

    <!-- 反馈 -->
    <view class="info-item" @click="goToFeedback">
      <text class="label">意见反馈</text>
      <view class="flex-end">
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 版本 -->
    <view class="info-item">
      <text class="label">版本</text>
      <view class="flex-end">
        <text class="arrow">1.0.0></text>
      </view>
    </view>

    <!-- 二维码弹出层 -->
    <view class="qr-popup" v-if="showQrCode">
      <view class="qr-content">
        <view class="close-container">
          <text class="close-btn" @click="showQrCode = false">×</text>
        </view>
        <image class="qr-image" :src="qrcode" />
      </view>
    </view>

    <!-- 清除缓存提示框 -->
    <view class="cache-popup" v-if="showCacheConfirm">
      <view class="cache-content">
        <text class="cache-tip">是否要清除应用的所有缓存？</text>
        <view class="cache-buttons">
          <button class="cancel-btn" @click="showCacheConfirm = false">取消</button>
          <button class="confirm-btn" @click="clearCache">确定</button>
        </view>
      </view>
    </view>

    <!-- 屏幕亮度弹出层 -->
    <view class="brightness-popup" v-if="showBrightness">
      <view class="brightness-content">
        <view class="close-container">
          <text class="close-btn" @click="showBrightness = false">×</text>
        </view>
        <text class="brightness-title">调整屏幕亮度</text>
        <slider
          class="brightness-slider"
          :value="brightnessValue"
          min="0"
          max="1"
          step="0.1"
          show-value
          @change="setBrightness"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useInfoStore } from '/store';
import { ApiUpdateAvatar, ApigetQrcode } from '../api/user';
import { useAuthStore } from "/store/token.js"
const user = useInfoStore();
const userInfo = ref({}); // 初始化为空对象，避免 undefined 问题

// 初始化请求头
const header = ref({}); // 确保 header 是一个对象
 // 获取 Pinia store
const authStore = useAuthStore();

onMounted(() => {
  // 确保 user.userInfo 是一个有效的对象
  if (user.userInfo) {
    userInfo.value = user.userInfo;
  } else {
    console.error('用户信息未正确加载');
  }

  // 初始化 header
  header.value["access-token"] = authStore.getToken;
});

// 上传头像
const uploadAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      uni.uploadFile({
        url: 'http://47.99.64.234:8004/app/file/upload', // 替换为你的上传接口地址
        filePath: tempFilePaths[0],
        name: 'file',
        header: header.value, // 确保 header 是一个对象
        success: async(uploadRes) => {
          const data = JSON.parse(uploadRes.data);
          if (data.code === 200) {
            userInfo.value.avatar = data.data;
            uni.showToast({
              title: "头像上传成功",
              icon: "none"
            });
            // 更新用户头像
            await ApiUpdateAvatar(userInfo.value.avatar)
            user.userInfo = userInfo.value
          } else {
            uni.showToast({
              title: "头像上传失败",
              icon: "none"
            });
          }
        },
        fail: (err) => {
          console.error(err);
          uni.showToast({
            title: "头像上传失败",
            icon: "none"
          });
        }
      });
    }
  });
};

// 二维码弹出层相关
const showQrCode = ref(false);
const qrcode = ref('');

// 获取二维码
const getCode = async () => {
  let res = await ApigetQrcode();
  qrcode.value = "data:image/png;base64," + res;
  showQrCode.value = true;
};

// 清除缓存相关
const showCacheConfirm = ref(false);
const confirmClearCache = () => {
  showCacheConfirm.value = true;
};
const clearCache = () => {
  uni.clearStorageSync();
  showCacheConfirm.value = false;
};

// 跳转到账号与安全
const update = () => {
  uni.navigateTo({
    url: "/pages/mine/account"
  });
};

// 屏幕亮度相关
const showBrightness = ref(false);
const brightnessValue = ref(0.5);

// 获取当前屏幕亮度
const getBrightness = async () => {
  try {
    const res = await uni.getScreenBrightness({
      success: (res) => {
        brightnessValue.value = res.value;
      }
    });
  } catch (e) {
    console.error('获取屏幕亮度失败', e);
  }
};

// 设置屏幕亮度
const setBrightness = (e) => {
  const value = e.detail.value;
  brightnessValue.value = value;
  uni.setScreenBrightness({
    value: value,
    success: () => {
      console.log('设置屏幕亮度成功', value);
    },
    fail: (err) => {
      console.error('设置屏幕亮度失败', err);
    }
  });
};

// 反馈相关
const goToFeedback = () => {
  uni.navigateTo({
    url: "/pages/mine/opinion"
  });
};

//地址管理
const goaddress = ()=>{
	uni.navigateTo({
		url:"/pages/mine/address"
	})
}

// 初始化获取屏幕亮度
onMounted(() => {
  getBrightness();
});

//编辑信息
const updateInfo = ()=>{
	uni.navigateTo({
		url:"/pages/mine/editor"
	})
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f5f5f5;
  padding: 10px;
  min-height: 600px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 5px;
}

.label {
  font-size: 16px;
  color: #333;
}

.flex-end {
  display: flex;
  align-items: center;
}

.arrow {
  font-size: 16px;
  color: #ccc;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px;
}

/* 二维码弹出层样式 */
.qr-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.qr-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
  position: relative;
}

.close-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.close-btn {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
}

.qr-image {
  width: 200px;
  height: 200px;
  margin: 20px auto 0;
  display: block;
}

/* 清除缓存提示框样式 */
.cache-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.cache-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 80%;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cache-tip {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 30px;
  color: #333;
}

.cache-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cache-buttons button {
  width: 120px;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  border: none;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background-color: #333;
  color: #fff;
}

/* 屏幕亮度弹出层样式 */
.brightness-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.brightness-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 80%;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.brightness-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #333;
}

.brightness-slider {
  width: 100%;
}
</style>